<link rel="stylesheet" href="templates/authority/messageSet/css/smsLimitSet.css" />
<!-- <script src="//unpkg.com/element-ui@1.4.4/lib/index.js"></script> -->
<style>
.el-dialog--small{
width: 40%;
}
.el-form-item {
    margin-bottom: 10px;
}
#app .el-input__inner{
	height:32px;
	width: 310px;
}
#app .el-dialog__body {
    padding: 30px 20px 15px;
}
#app1 .el-input__inner{
	height:32px;
	width: 310px;
}
#app1 .el-dialog__body {
    padding: 30px 20px 15px;
}
</style>
<input id = "deptQuota" style="display:none;" type="text" value=""/>
<input id = "orgname" style="display:none;" type="text" value=""/>
<input id = "deptQuotaId" style="display:none;" type="text" value=""/>
<input type="text" value="" id="orgCode" style="display:none;"/>
<div id="app">
<!-- Form -->
<el-button id="popview" type="text" style="display:none;" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
<el-dialog title="短信额度配置" :visible.sync="dialogFormVisible"  :show-close = "false">
<hr style="margin-top: -24px;  margin-bottom: 24px;">
  <el-form :model="form">
  	<el-form-item label="选择部门:" :label-width="formLabelWidth">
      <el-select v-model="value" placeholder="请选择部门">        
      </el-select>
    </el-form-item>
    <!-- <el-form-item label="选择部门:" :label-width="formLabelWidth">
        <el-input id="input1"  v-model="form.name2" auto-complete="off"></el-input>
    </el-form-item> -->
    <div style="margin-left: 120px;
		margin-top: -15px;
		margin-bottom: 10px;
		color: #c00e0e;">选择可用短信发送消息部门</div> 
    <el-form-item label="分配可用短信数:" :label-width="formLabelWidth">
      <el-input id="input2" v-model="form.name3" auto-complete="off"></el-input>
    </el-form-item>  
    <div style="margin-left: 120px;
		margin-top: -15px;
		margin-bottom: 10px;
		color: #c00e0e;">为已选部门分配可用短信数，默认条数为0表示不限制</div>   
  </el-form>
  <div slot="footer" class="dialog-footer">
  	<el-button type="primary" @click="sure()">确 定</el-button>
    <el-button id="cancel" @click="dialogFormVisible = false">取 消</el-button>    
  </div>
</el-dialog>
</div>

<div id="app1">
<!-- Form -->
<el-button id="popview1" type="text" style="display:none;" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
<el-dialog title="短信额度配置" :visible.sync="dialogFormVisible"  :show-close = "false">
<hr style="margin-top: -24px;  margin-bottom: 24px;">
  <el-form :model="form">
  	<el-form-item label="每月可用短信数:" :label-width="formLabelWidth">
        <el-input v-model="form.name" auto-complete="off"></el-input>
    </el-form-item>   
    <div id="partselect">
    	<el-form-item label="选择部门:" :label-width="formLabelWidth">
	      <el-select v-model="value1" placeholder="请选择部门">
	        <el-option
		      v-for="item in options"
		      :key="item.value"
		      :label="item.label"
		      :value="item.value">
		    </el-option>
	      </el-select>
	    </el-form-item>
    </div>	  	
    <div style="margin-left: 120px;
		margin-top: -15px;
		margin-bottom: 10px;
		color: #c00e0e;">选择可用短信发送消息部门</div> 
    <el-form-item label="分配可用短信数:" :label-width="formLabelWidth">
      <el-input v-model="form.name1" auto-complete="off"></el-input>
    </el-form-item>  
    <div style="margin-left: 120px;
		margin-top: -15px;
		margin-bottom: 10px;
		color: #c00e0e;">为已选部门分配可用短信数，默认条数为0表示不限制</div>   
  </el-form>
  <div slot="footer" class="dialog-footer">
  	<el-button type="primary" @click="edit_sure()">确 定</el-button>
    <el-button id="cancel1" @click="dialogFormVisible = false">取 消</el-button>    
  </div>
</el-dialog>
</div>

<div id="sendedmessage">
    <div class="pd14 vany_authority">
        <div class="vany_treeTable pd14">
            <div class="pb10" id="crumbs" style="margin-bottom:0px;">
                <el-breadcrumb separator="/">
	                <el-breadcrumb-item :to="{ path: '/' }">消息管理</el-breadcrumb-item>
	                <el-breadcrumb-item :to="{ path: '/' }">消息设置</el-breadcrumb-item>
	                <el-breadcrumb-item>短信额度配置</el-breadcrumb-item>
	            </el-breadcrumb>
            </div>
            <table style="width:100%;table-layout:fixed;min-width:800px;">
				<tr>
					<td style="width:40%;min-height:10px;">
						<div class = "charts">
			              <div id="myChart" class = "myChart"></div>
			              <div class = "title_msg" style="position: absolute;font-size: 16px;font-weight: bold;color: #000;">短信分配统计</div>           
			            </div>	            
					</td>
					<td valign="top" style="width:60%;min-height:10px;">
						 <div>
			                <div class="pd14" style="border: 0px solid #e1e6eb;height: 20px;">
			                    <el-row :gutter="8">
			                        <el-col :span="12">
			                           <div style = "line-height: 1.8;
											font-size: 16px;
											color: #000;
											font-weight: bold;">短信分配详情</div>
			                        </el-col>
			                        <el-col :span="12" style="text-align: right;">
			                            <el-form :inline="true"  class="demo-form-inline">			                              
			                                <el-form-item label="" style="margin-bottom: 0px" >
			                                    <el-input placeholder="请输入关键词" style="border-radius: 0px" v-model="keyword"></el-input>
			                                </el-form-item>
			                                <el-form-item style="margin-bottom: 0px">
			                                    <el-button style="background: #fff;border-color:#c4c4c4;" @click="search()">搜索</el-button>
			                                </el-form-item>
			                            </el-form>
			                        </el-col>
			                    </el-row>
			                </div>
			                <el-table :data="tableData" v-loading="loading" style="width:100%;" ref="multipleTable" @selection-change="handleSelectionChange">
			                    <el-table-column type="selection"></el-table-column>
			                    <el-table-column style="display:none;" prop="deptQuotaId" show-overflow-tooltip label="编号" width=""></el-table-column>
			                    <el-table-column prop="orgname" show-overflow-tooltip label="部门" width=""></el-table-column>
			                    <el-table-column prop="deptQuota" show-overflow-tooltip label="已分配消息数" width=""></el-table-column>
			                    <el-table-column label="操作" width="100px">
			                        <template scope="scope">
			                            <el-button type="text" size="small" @click="editMsgPop(scope.row)">编辑</el-button>
			                            <el-button type="text" id="edit_sure" style="display:none;" size="small" @click="MsgPop_sure()"></el-button>
			                        </template>
			                    </el-table-column>
			                </el-table>
			            </div>
			            <div class="pd14" style="height: 80px;margin-top: -1px;">
			                <el-row>
			                    <el-col :span="8">
			                        <el-button type="primary" @click="editSms()">编辑</el-button>
			                        <!-- <el-button style="display:none;" type="primary" @click="editSms()">编辑</el-button> -->
			                    </el-col>
			                    <el-col :span="16">
			                        <el-row type="flex" justify="end">
			                            <el-pagination
			                                    @size-change="handleSizeChange"
			                                    @current-change="handleCurrentChange"
			                                    :current-page="pageIndex"
			                                    :page-sizes="[10, 20, 30]"
			                                    :page-size="pageSize"
			                                    layout="total, sizes, prev, pager, next, jumper"
			                                    :total="total">
			                            </el-pagination>
			                        </el-row>
			                    </el-col>
			                </el-row>
			            </div> 			            
					</td>					
				</tr>
			</table>
    </div>
</div>
</div>
<script type="text/javascript" src="templates/authority/index/js/echarts.min.js"></script>
<script type="text/javascript" src="templates/authority/messageSet/js/smsLimitSet.js"></script>
<script type="text/javascript" src="templates/authority/messageSet/js/sendedmessage.js"></script>
<script type="text/javascript">
    //基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('myChart'));
  //消息模式统计
    var subtext=0,tw=0,wz=0,wl=0;
    $.ajax({
        type: "post",
        url: "/msgStatistic/getSmsDistributeById",
        data:{token:sessionStorage.token},
        async: true,
        success: function(data) {
        	totalMsm = data.resultData.totalMsm;
        	disNum = data.resultData.disNum;
        	nondisNum = data.resultData.nondisNum;
        	createOption(totalMsm,disNum,nondisNum);
        	myChart.setOption(option);
        }
    });
    function createOption(totalMsm,disNum,nondisNum){
    	option = {
        	    title:{
        	        text:'短信总数',
        	        subtext:totalMsm,
        	        left:'center',
        	        top:'44%',
        	        itemGap:5,
        	        textStyle:{
        	            color:'#141f1f',
        	            fontSize:12
        	        },
        	        subtextStyle:{
        	            color:'#0072e6',
        	            fontSize:18,
        	            fontWeight:'bold'
        	        }
        	    },
        	    legend: {
                    orient: 'horizontal',
                    x: 'center',
                    y:'bottom',
                    data:['未分配','已分配']
                },
        	    color: ['rgb(72,118,255)','rgb(255,182,193)'],
        	    series: [
        	        {
        	            name:'消息',
        	            type:'pie',
        	            radius: ['38%', '50%'],
        	            label: {
        	                normal: {
        	                    //formatter: '{b|{b}}\n{c}人',
        	                    rich: {
        	                        b: {
        	                            fontSize: 12,
        	                            lineHeight: 20
        	                        }
        	                    }
        	                }
        	            },
        	            data:[
        	                {value:nondisNum, name:'未分配'},
		                    {value:disNum, name:'已分配'},
        	            ]
        	        }
        	    ]
        	};
    		
    }   
    // 使用刚指定的配置项和数据显示图表。
    //myChart.setOption(option);
    
    var Main = {
    	    data() {
    	      return {    	    	    
   	            value1: '',
    	        dialogTableVisible: false,
    	        dialogFormVisible: false,
    	        form: {
    	          name: '',
    	          region: '',
    	          date1: '',
    	          date2: '',
    	          delivery: false,
    	          type: [],
    	          resource: '',
    	          desc: ''
    	        },
    	        formLabelWidth: '120px'    	        
    	      };
    	    },
    	    methods: {
    	        sure: function () {
    	          $('#edit_sure').click();
    	        }
    	      }
    	  };
    	var Ctor = Vue.extend(Main);
    	new Ctor().$mount('#app');
    	//new Ctor().$mount('#app1');
    	
    	
    	var app1=new Vue({
		    el: "#app1",
		    data: function() {
		        return {
		        	options: [],
		            value1: '',
	    	        dialogTableVisible: false,
	    	        dialogFormVisible: false,
	    	        form: {
	    	          name: '',
	    	          region: '',
	    	          date1: '',
	    	          date2: '',
	    	          delivery: false,
	    	          type: [],
	    	          resource: '',
	    	          desc: ''
	    	        },
	    	        formLabelWidth: '120px'  
		        }
		    },
		    methods: {    	
		    	changeValue:function(value){    		
		    		$('#orgCode').val(value);		    		
		    	},		    	
		    	edit_sure:function(){
		    		$('#cancel1').click();  
		    		var monthlyQuota = $($('.el-input__inner')[0]).val();//每月可用短信数
		    		var deptQuota = $($('.el-input__inner')[2]).val();//分配可用短信数
		    		//var orgCode = $('#orgCode').val();//组织机构号
		    		//alert(monthlyQuota+" "+deptQuota);
		    		$.ajax({
		             	type: "post",
		             	url: "/msgStatistic/editSmsDistrLimit",
		             	data:{token:sessionStorage.token,monthlyQuota:monthlyQuota,deptQuota:deptQuota,deptQuotaId:$("#deptQuotaId").val()},  
		                 async: true,
		                 success: function(data) {
		                	console.log("success!");
		                 }
		             }); 
		    	}
		    }
    	});    	
	
</script>

